cd<template>
    <div id="item">
        <input type="checkbox" v-model="todo.completed">
        <label :class="{completed: todo.completed}">{{todo.content}}</label>
        <button @click="delItem">X</button>
    </div>
</template>

<script>
    export default {
        name: "item",
        props: ['todo'],
        methods: {
            delItem() {
                this.$emit('del', this.todo.id)
            }
        },
    }
</script>

<style lang="stylus" scoped>
    #item
        padding 10px
        border-bottom 1px solid #eee
        input
            -webkit-appearance radio
        label
            padding-left 20px
            font-size 24px
        .completed
            color lightgrey
            text-decoration line-through
        &:hover
            button
                display inline
        button
            display none
            float right
            border none
            background none
            font-size 22px
            color palevioletred
</style>